<template>
  <div class="canvas-container">
    <canvas ref="canvasId" />
    <h3>太极图</h3>
  </div>
</template>

<script>
export default {
  mounted() {
    const arr = [20, 30, 40, 10, 50];
    this.draw(arr);
  },
  methods: {
    draw(arr) {
      //创建画布
      const canvasCon = document.querySelector(".canvas-container");
      const canvas = this.$refs["canvasId"];
      const canvasWidth = canvasCon.clientWidth;
      const canvasHeight = canvasCon.clientWidth;
      canvas.width = canvasWidth;
      canvas.height = canvasHeight;
      const ctx = canvas.getContext("2d");

      const x = canvasWidth * 0.5;
      const y = canvasWidth * 0.5;
      const r = canvasWidth * 0.3;
      // 左黑 大
      ctx.beginPath()
      ctx.arc(x, y, r, 0, Math.PI*2, false)
      ctx.fillStyle = "#000000";
      ctx.fill()
      ctx.strokeStyle = "#FFFFFF";
      ctx.stroke()

      // 右白 大
      ctx.beginPath()
      ctx.arc(x, y, r, -Math.PI/2, Math.PI/2, false)
      ctx.fillStyle = "#FFFFFF";
      ctx.fill()
      ctx.strokeStyle = "#000000";
      ctx.stroke()

      // 上白 中
      ctx.beginPath()
      const mr = r * 0.5;
      const tmy = y - mr;
      ctx.fillStyle = "#FFFFFF";
      ctx.arc(x, tmy, mr, 0, Math.PI*2, false)
      ctx.fill()

      // 下黑 中
      ctx.beginPath()
      const bmy = y + mr;
      ctx.fillStyle = "#000000";
      ctx.arc(x, bmy, mr, 0, Math.PI*2, false)
      ctx.fill()

      // 上黑 小
      ctx.beginPath()
      ctx.fillStyle = "#000000";
      ctx.arc(x, tmy, mr/5, 0, Math.PI*2, false)
      ctx.fill()

      // 下白 小
      ctx.beginPath()
      ctx.fillStyle = "#ffffff";
      ctx.arc(x, bmy, mr/5, 0, Math.PI*2, false)
      ctx.fill()
    },
  },
};
</script>
<style lang="scss" scoped>
</style>